import 'package:flutter/material.dart';
import '../core/responsive/breakpoints.dart';
import '../core/responsive/responsive_utils.dart';

/// 响应式首页组件
/// 根据设备类型自动调整布局和内容展示
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ResponsiveLayout(
      context: context,
      mobile: _buildMobileLayout(context),
      tablet: _buildTabletLayout(context),
      desktop: _buildDesktopLayout(context),
      largeDesktop: _buildLargeDesktopLayout(context),
    );
  }

  /// 响应式布局包装器
  Widget ResponsiveLayout({
    required BuildContext context,
    required Widget mobile,
    required Widget tablet,
    required Widget desktop,
    required Widget largeDesktop,
  }) {
    if (AppBreakpoints.isLargeDesktop(context)) return largeDesktop;
    if (AppBreakpoints.isDesktop(context)) return desktop;
    if (AppBreakpoints.isTablet(context)) return tablet;
    return mobile;
  }

  /// 手机端布局
  Widget _buildMobileLayout(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(ResponsiveUtils.getResponsivePadding(context).top),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildWelcomeSection(context),
          SizedBox(height: 24),
          _buildFeatureGrid(context, crossAxisCount: 1),
        ],
      ),
    );
  }

  /// 平板端布局
  Widget _buildTabletLayout(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(ResponsiveUtils.getResponsivePadding(context).top),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildWelcomeSection(context),
          SizedBox(height: 32),
          _buildFeatureGrid(context, crossAxisCount: 2),
        ],
      ),
    );
  }

  /// 桌面端布局
  Widget _buildDesktopLayout(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(ResponsiveUtils.getResponsivePadding(context).top),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildWelcomeSection(context),
          SizedBox(height: 40),
          _buildFeatureGrid(context, crossAxisCount: 3),
        ],
      ),
    );
  }

  /// 大屏桌面端布局
  Widget _buildLargeDesktopLayout(BuildContext context) {
    return SingleChildScrollView(
      padding: EdgeInsets.all(ResponsiveUtils.getResponsivePadding(context).top),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildWelcomeSection(context),
          SizedBox(height: 48),
          _buildFeatureGrid(context, crossAxisCount: 4),
        ],
      ),
    );
  }

  /// 欢迎区域
  Widget _buildWelcomeSection(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '欢迎使用 Moolio',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveTitleFontSize(context),
            fontWeight: FontWeight.bold,
            color: Theme.of(context).colorScheme.onSurface,
          ),
        ),
        SizedBox(height: 8),
        Text(
          '这是一个现代化的Flutter应用，支持多端适配',
          style: TextStyle(
            fontSize: ResponsiveUtils.getResponsiveBodyFontSize(context),
            color: Theme.of(context).colorScheme.onSurfaceVariant,
          ),
        ),
      ],
    );
  }

  /// 功能网格
  Widget _buildFeatureGrid(BuildContext context, {required int crossAxisCount}) {
    final features = [
      _FeatureData(
        icon: Icons.rocket_launch,
        title: '快速开始',
        description: '立即开始使用应用的核心功能',
        color: Colors.blue,
      ),
      _FeatureData(
        icon: Icons.analytics,
        title: '数据分析',
        description: '查看详细的数据分析报告',
        color: Colors.green,
      ),
      _FeatureData(
        icon: Icons.settings,
        title: '个性化设置',
        description: '根据您的需求自定义应用',
        color: Colors.purple,
      ),
      _FeatureData(
        icon: Icons.support,
        title: '技术支持',
        description: '获取专业的技术支持服务',
        color: Colors.orange,
      ),
    ];

    return LayoutBuilder(
      builder: (context, constraints) {
        return GridView.builder(
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: crossAxisCount,
            childAspectRatio: _getChildAspectRatio(context),
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
          ),
          itemCount: features.length,
          itemBuilder: (context, index) {
            return _buildFeatureCard(context, features[index]);
          },
        );
      },
    );
  }

  /// 计算卡片宽高比
  double _getChildAspectRatio(BuildContext context) {
    if (AppBreakpoints.isLargeDesktop(context)) return 1.2;
    if (AppBreakpoints.isDesktop(context)) return 1.1;
    if (AppBreakpoints.isTablet(context)) return 1.0;
    return 1.5;
  }

  /// 功能卡片
  Widget _buildFeatureCard(BuildContext context, _FeatureData feature) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(ResponsiveUtils.getResponsiveBorderRadius(context)),
      ),
      child: InkWell(
        borderRadius: BorderRadius.circular(ResponsiveUtils.getResponsiveBorderRadius(context)),
        onTap: () {},
        child: Container(
          padding: EdgeInsets.all(ResponsiveUtils.getResponsivePadding(context).top),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                feature.icon,
                size: ResponsiveUtils.getResponsiveIconSize(context),
                color: feature.color,
              ),
              SizedBox(height: 12),
              Text(
                feature.title,
                style: TextStyle(
                  fontSize: ResponsiveUtils.getResponsiveBodyFontSize(context) + 2,
                  fontWeight: FontWeight.bold,
                  color: Theme.of(context).colorScheme.onSurface,
                ),
              ),
              SizedBox(height: 4),
              Text(
                feature.description,
                style: TextStyle(
                  fontSize: ResponsiveUtils.getResponsiveBodyFontSize(context) - 2,
                  color: Theme.of(context).colorScheme.onSurfaceVariant,
                ),
                textAlign: TextAlign.center,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

/// 功能数据模型
class _FeatureData {
  final IconData icon;
  final String title;
  final String description;
  final Color color;

  const _FeatureData({
    required this.icon,
    required this.title,
    required this.description,
    required this.color,
  });
}